<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button
          class="icon-button back-button"
          style="margin-right: 10px"
          @click="$router.back()"
        >
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span style="display:flex">
          <link-button :isName="true"
            :content="$t('route.policy')"
            @click="
              $router.push({
                name: 'Policy',
              })
            "
          />&nbsp;/&nbsp;{{USBRuleData.tenant_name}}&nbsp;/&nbsp;{{ USBRuleData.name }}
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            v-loading="loading"
            ref="USBRule"
            :pageMethod="
              (params) => {
                params.search = searchValue;
                return $pandaApi.apiListUsbRulesPaged(USBRuleData.id, params);
              }
            "
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button
                  class="icon-button setting-button"
									@click="createUSBRule"
                  style="width: auto;"
                >
                  <i
                    class="iconfont iconzhongyiicon_chuangjian"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{$t('policy.NewUSBRule')}}</span>
                </el-button>
                <el-button
                  class="icon-button setting-button"
                  style="width: auto;margin-right:10px"
									:disabled="tableSlotData.table.selectRows.length <= 0"
									@click="deleteUSBRule(tableSlotData.table.selectRows, 'USBRule')"
                >
                  <i
                    class="iconfont iconzhongyiicon_shanchu"
                    style="font-size: 12px; margin-right: 5px"
                  ></i>
                  <span style="font-size: 12px">{{$t('policy.DeleteUSBRules')}}</span>
                </el-button>
                <div class="table-left-options">
                  <el-button class="icon-button setting-button" style="width: auto;" :loading = "tableSlotData.table.loading"
                    @click="$nextTick(()=>tableSlotData.table.refresh().then(()=>{
                        $message.success($t('common.refreshSuccess'))
                      }).catch(()=>{
                        $message.success($t('common.refreshFail'))
                      }))">
                    <i v-if="!tableSlotData.table.loading" class="el-icon-refresh" style="font-size: 12px; margin-right: 5px;"></i>
                    <span style="font-size: 12px;">{{ $t('common.refresh') }}</span>
                  </el-button>
                </div>
              </div>
              <!-- <div class="table-right-options">
                
                <el-input
                  :placeholder="$t('policy.message.SearchByUSBDeviceType')"
                  v-model="searchValue"
                  @change="tableSlotData.table.refresh"
                  style="width: auto"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input> 
              </div> -->
            </template>
            <template #table-column="tableSlotData">
              <el-table-column
                type="selection"
                width="40"
                align="center"
								:selectable="(row, index) => {
									if (row.usb_family === '*' && row.vendor === '*' && row.product === '*') {
										return false;
									}
									return true;
								}"
              ></el-table-column>
							<!-- usb设备类型 -->
              <el-table-column
                prop="usb_family_name"
                :label="$t('policy.USBDeviceType')"
                :formatter="(row, column) => {
                  let usb_family_name = '';
                  if (row.usb_family_name) {
                    let isletter = /.*[\u4e00-\u9fa5]+.*$/.test(row.usb_family_name)
                    if (!isletter) {
                      usb_family_name = $t(`policy.usbFamily.${row.usb_family_name}`)
                    } else {
                      usb_family_name = row.usb_family_name
                    }
                  }
                  return usb_family_name;
                }"
              >
              </el-table-column>
							<!-- 厂商 -->
              <el-table-column
                prop="vendor_name"
                :label="$t('policy.Vendor')"
              >
              </el-table-column>
							<!-- 产品 -->
              <el-table-column
                prop="product_name"
                :label="$t('policy.product')"
              >
              </el-table-column>
							<!-- 描述 -->
              <el-table-column
                prop="description"
                :label="$t('common.description')"
              >
              </el-table-column>
							<!-- 允许透传 -->
              <el-table-column
                prop="enabled"
                :label="$t('policy.AllowPassThrough')"
              >
								<template #default="props">
									<el-switch
                    :class="language === 'en' ? 'el-switch-en': ''"
										v-model="props.row.enabled"
										@change="changeEnabled(props.row, props.row.enabled)">
									</el-switch>
                </template>
              </el-table-column>
                <el-table-column :label="$t('common.action')" width="150">
                <!-- 操作 -->
                <template #default="props">
                  <link-button :content="$t('common.delete')" :size="10" :disabled="props.row.usb_family === '*' && props.row.vendor === '*' && props.row.product === '*'" :font-size="'12px'" style="margin-right:15px" @click="deleteUSBRule([props.row], 'USBRule')" />
                  <link-button :disabled="props.row.usb_family === '*' && props.row.vendor === '*' && props.row.product === '*'" :content="$t('common.edit')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="createUSBRule(props.row)" />
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
							<create-form-dialog @success="tableSlotData.table.refresh" ref="createUSBRule" />
							<delete-form-dialog @success="tableSlotData.table.refresh" ref="deleteUSBRule" />
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import BasicTable from "../../../components/Basic/Table/BasicTable.vue";
import LinkButton from "../../../components/Basic/Button/LinkButton.vue";
import CreateFormDialog from "../components/createUSBRule.vue";
import DeleteFormDialog from "../components/deleteFormDialog.vue";
import { AuthModule } from "../../../store/modules/auth";
import { AppModule } from "../../../store/modules/app";
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
		CreateFormDialog,
		DeleteFormDialog
  },
  data() {
    return {
      loading: false,
      USBRuleData: {},
      searchValue: "",
      language: AppModule.language
    };
  },
  async created() {
    this.USBRuleData = {
      id: (this as any).$route.query.USBRuleId,
			name: (() => {
				if ((this as any).$route.query.USBRuleName === 'Default USB Rule Group') {
					return this.$t('policy.DefaultUSBRuleGroup').toString();
				}
				return (this as any).$route.query.USBRuleName;
			})(),
      tenant_name: (this as any).$route.query.tenant_name
    };
  },
  methods: {
		createUSBRule(data?: any) {
			(this.$refs['createUSBRule'] as any).init((this.USBRuleData as any).id, data);
		},
		deleteUSBRule(data: any, type: string) {
			let obj: any = {};
			obj.data = data;
			obj.type = type;
			(this.$refs['deleteUSBRule'] as any).init(obj);
		},
		changeEnabled(data: any, value: any) {
			this.loading = true;
			(this as any).$pandaApi.apiUpdateUsbRule(data.group, data.id, { enabled: value }).then(() => {
        this.$message.success(this.$t('message.requestSuccess').toString())
				this.loading = false;
				(this.$refs['USBRule'] as any).refresh();
			}).catch(() => {
        this.$message.success(this.$t('message.actionError').toString())
				this.loading = false;
				(this.$refs['USBRule'] as any).refresh();
			})
		}
  },
});
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px;
        }

        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
